import { ElRadioGroup } from 'element-plus';
import { PropType, ref, watch } from 'vue';
import { MciRadio } from '../Radio';
import './index.scss';
export interface IRadioOptionItem {
  /** 展示的text */
  text: string;
  /** 取值，参照ElRadio用法 */
  label: string | number | boolean;
  disabled?: boolean;
}

export const MciRadioGroup = defineComponent({
  name: 'MciRadioGroup',
  props: {
    options: {
      type: Array as PropType<IRadioOptionItem[]>,
      default: () => []
    },
    modelValue: {
      type: [String, Number, Boolean],
      default: ''
    },
    // 显示模式
    mode: {
      type: String as PropType<TVitalModeType>,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String, // row | column
      default: 'column'
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const value = ref(props.modelValue);

    watch(value, (value) => {
      emit('update:modelValue', value);
    });

    watch(
      () => props.modelValue,
      (val) => {
        value.value = val;
      }
    );

    const modeComputed = computed(() => props.mode);

    const classNames = computed(() => {
      return `mci-radio-group flex-${props.direction}`;
    });

    return {
      modeComputed,
      classNames,
      value
    };
  },
  render() {
    const renderRadios = () => {
      if (!this.options) return null;
      return this.options?.map((option: IRadioOptionItem) => <MciRadio key={option.label as string} {...option} />);
    };

    if (this.modeComputed === 'view') {
      return <div class="mr-16 text-14px">{this.options?.find((v) => v?.label === this.modelValue)?.text}</div>;
    }
    return (
      <ElRadioGroup v-model={this.value} disabled={this.disabled} class={this.classNames}>
        {{
          default: () => this.$slots.default?.() ?? renderRadios()
        }}
      </ElRadioGroup>
    );
  }
});
